Vue Js Renders the element and component one time only: The v-once directive allows the user to bind an expression once and never update it again, no matter how much the value changes .This means that the element and component will not be updated or re-rendered unless a property or state value is changed.v-once directive allows the user to bind an expression once and never update it again, no matter how much the value changes. We will learn how to display only once in this tutorial.
How to Render element only one time in Vue Js ?
Rendering an element only once in Vue.js can be accomplished by using the v-once directive. By using the v-once directive, a component’s markup can be rendered once and will not be re-rendered if its reactive data changes
Vue Js Display Element only one times
<div id="app">
<div v-once>{{ uniqueId }}</div>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
uniqueId: Math.random().toString(36).substring(2, 15)
}
},
});
</script>
Output of above example
